<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>

</head>
</head>
<body>
<div id="app">
<ul>
  <book_list v-for="book in books" :mybook="book"></book_list>
</ul>
</div>
<!-- 1:引包 -->
<script type="text/javascript" src="../../node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
Vue.component('book_list',{
  props:["mybook"],
  template:`<li>{{mybook.title}}</li>`
})

  new Vue({
    el: "#app",
    data: {
      books: [
        {"title": "西游记"},
        {"title": "水浒传"},
        {"title": "三国演义"},
        {"title": "红楼梦"}
      ]
    }
  })
</script>

</body>
</html>
